<template>
    <div class="work_info">
        <div class="info_card">
            <div class="img_card">
                <img src="../../../assets/img/bg.jpg" />
            </div>
            <div class="title_card">
                <div class="card_title">
                    <img src="../../../assets/icon/star.png" />
                    <p>作品实例</p>
                </div>
            </div>
            <div class="descrip_card">
                <div class="card_appname">
                    <h1>{{ appname }}</h1>
                </div>
                <p v-html="description" />
            </div>
            <div class="tech_card"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const description = ref(`
这是一个天气查询的网页程序，通过vue3 + typescript + vite构建。
<br>
它通过typescript的特性来声明变量，通过vue3的setup
来管理函数和变量，是一个健壮性很强的系统，
`)
const appname = ref('天气')



</script>

<style scoped lang="less">
.work_info {
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info_card {
    height: 4rem;
    width: 8rem;
    position: relative;
}

.img_card {
    img {
        // height: 100%;
        width: 6rem;
        height: 3.5rem;
    }
}

.title_card {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.24rem;
    color: #e77164;
    padding-right: 0.3rem;
    .card_title {
        color: #fff;
        text-align: right;
        letter-spacing: 0.03rem;
        display: flex;
        justify-content: flex-end;
        img {
            width: 0.3rem;
            height: 0.3rem;
        }
    }
}

.descrip_card {
    position: absolute;
    background-color: #160503;
    border-radius: 8px;
    padding: 0.3rem;
    color: #fff;
    top: 0.4rem;
    right: 0;
    width: 3rem;
    font-weight: 400;
    letter-spacing: 0.03rem;
    .card_appname {
        margin-bottom: 0.1rem;
        font-weight: bolder;
        color: #e77164;
        font-weight: bolder;
    }
}
</style>